<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="">

    <link rel="stylesheet" href="/lib/weui.min.css">
    <link rel="stylesheet" href="/css/jquery-weui.css">

    <link rel="stylesheet" href="/plugins/fontaw/css/font-awesome.css">
    <link rel="stylesheet" href="/plugins/kim/style.css">
    <style>
        html{font-size:16px}
        body{line-height:unset}
        header{height:2.5rem;display: flex;line-height: 2.5rem;border-bottom: rgba(10,10,10,.2) solid 1px;position: fixed;top:0rem;
        width: 100%}
        header nav{flex: 1;text-align: center;background-color: white}
        header .currntNav{color:darkred;border-bottom: darkred solid 0.2rem;background-color: white}
        section{position: fixed;top:2.5rem;bottom:7.2rem;width: 100%;height: 100%}

        footer{position: fixed;bottom: 0rem;height: 130px;width: 100%;background-color: white}
        .reply-tools{display: -webkit-box;width: 100%; display: flex;padding:0rem 0.5rem}
        .reply-input{width: 95%;height: 36px;border-radius: 0.6rem;border: #cccccc solid 1px;padding:0rem 0.5rem;font-size:16px}
        .w-8{width:80%;padding:0.3rem}
        .w-2{width:20%;padding:0.3rem}
        .reply-links{display: flex;flex-wrap: wrap;padding:0.5rem}
        .link-block{flex:1;text-align: center}
        .link-block i{font-size:28px;display: inline-block;color: grey;margin-bottom: 3px}
        .link-block a{color:grey}
        .link-block span{display: table-cell;font-size: 16px;text-align: center;width: 100%;display: inline-block}
        .reply-btn{
            background-color: lightgreen;
            border: forestgreen solid 1px;
            border-radius: 0.2rem;
            height: 36px;
            line-height: 36px;
            width: 80%;
            text-align: center;
            vertical-align: middle
        }

        .inquir-history{
            overflow-y: scroll;
        }
        .chat-zone{
            display: none;
            position: relative;
        }
        .patient-info{position: relative;background-color: white;width: 95%;height: 9rem;margin-top: 0.5rem;
        padding:0.5rem}
        .div-avatar{position: absolute;top:1.5rem}
        .div-avatar img{border-radius: 50%}
        .div-basic{margin-left: 5rem;}
        .info-name{height: 2rem;line-height: 2rem;border-bottom: #e1e1e1 solid 1px}
        .info-wechat{color: grey;font-size: 16px}
        .info-wechat i{width: 1rem}
        .more-inquiry{ text-align: center;color: #1aad19;border-top: #e1e1e1 solid 1px;height: 3rem; line-height: 3rem}
        .more-inquiry i{ width: 1.2rem}
        .history-list{background-color: white;margin-top: 0.5rem;padding: 0.5rem;}
        .history-block{border: #e1e1e1 solid 1px; border-radius: 0.5rem;min-height: 4rem;margin-bottom: 0.5rem}
        .history-block-head{height: 2.5rem;line-height: 2.5rem;background-color: orange;padding: 0rem 0.5rem;color: white}
        .right-tip{float: right; border-radius: 0.6rem;border: #e1e1e1 solid 1px;font-size: 16px;line-height: 16px;margin-top: 0.6rem;padding: 0.2rem}
         .history-block-body{padding:0.7rem;font-size: 16px}
        .history-block-body span{margin-right: 0.4rem;color: grey;text-align: justify;width: 3.5rem;display:inline-block; text-align-last:justify;}
        .history-block-body span:after{  content: ":";/* 放大镜符号 */font-size: 14px;}
        .history-block-body p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin: 0.3rem}
        .message{padding:0.5rem;color:#4b4a48}
        .message-mid-line{text-align: center;color:#cccccc;font-size: 16px;margin-bottom: 0.2rem}
        .message-box{display: flex}
        .user-avatar{}
        .user-avatar img{ border-radius: 50%;width: 2.4rem}
        .message-content{font-size: 16px;margin: 0rem 0.5rem;}

        .message-top{background-color: white;border-radius: 0.2rem;padding:0.4rem;height: 30px;display: inline-table}
        .message-top:before{
            content: ' ';
            position: absolute;
            top: 11px;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            width: 0;
            height: 0;
        }
        .me{background-color: lightgreen}
        .orange-title{background-color: orange}
        .doc{width: 13rem}
        .span-right{float:right;color: grey;font-size: 16px}
        .message-content-body{background-color: white;font-size: 16px;padding:0.4rem}
        .message-content-body p{margin: 0rem}
        .message-content-body span{color: grey}
        .message-content-foot{text-align: center;font-size:16px;color:#cccccc;border-top: #e1e1e1 solid 1px;background-color: white;padding:0.1rem}
        .f-right{float: right}
        .chat-content{position: fixed;top:2.5rem;bottom:7.2rem;overflow-y: scroll;width:100%}
        .btn-zone{ text-align: center}
        .btn-zone a{flex:1;width: 40%;display: inline-block}

        .kk-black-border{border:1px #6e6c64 solid;padding:0.5rem;margin:0.5rem;background-color: white;
            -moz-box-shadow:2px 4px 15px #333333; -webkit-box-shadow:2px 4px 15px #333333; box-shadow:2px 4px 15px #333333;}
        .kk-ul{list-style: none;}
        .kk-ul li{width: 30%;float: left;height: 2rem;padding:0px 5px}
        .kk-ul input{vertical-align: middle}
        .kk-ul input[type="radio"]{width: 1rem;height:1rem}
        .weui-grids a{color: grey}
    </style>
</head>
<body>
<header>
    <nav class="currntNav" target="inquir-history">病例</nav>
    <nav target="chat-zone">咨询</nav>
</header>
<section class="inquir-history" >
    <div class="patient-info">
        <div class="div-avatar">
            <img src="/mod-page/images/avatar.jpg" style="width:4rem">
        </div>
        <div class="div-basic">
           <div class="info-name">
               李天威 <a><span style="float: right;color:grey;font-size:16px">添加备注</span></a>
           </div>
            <div class="info-wechat">
               <p><i class="fa fa-wechat" aria-hidden="true"></i> 李天威</p>
               <p><i class="fa fa-phone-square" aria-hidden="true"></i> 13758899444</p>
            </div>
        </div>
        <div class="more-inquiry">
            <a><i class="fa fa-plus-square" aria-hidden="true"></i> 补充病例 </a>
        </div>
    </div>

    <div class="history-list">
            <div class="history-block">
                <div class="history-block-head">
                    <i class="fa fa-reorder" aria-hidden="true"></i> 方案
                    <span class="right-tip">未支付</span>
                </div>
                <div class="history-block-body">
                    <p><span>患者</span>sss，34岁</p>
                    <p><span>病、症名</span>大幅度发</p>
                    <p><span>方案收费</span>大幅度发</p>
                    <p><span>处方</span>费大幅度发asdfas是的发送到发送到发生的方式地方官史蒂夫是的分公司电饭锅</p>
                    <p><span>贴数</span>分公司电饭锅</p>
                    <p><span>开方时间</span>大幅度发</p>
                </div>
            </div>
        <div class="history-block">
            <div class="history-block-head">
                <i class="fa fa-reorder" aria-hidden="true"></i> 方案
                <span class="right-tip">未支付</span>
            </div>
            <div class="history-block-body">
                <p><span>患者</span>sss，34岁</p>
                <p><span>病、症名</span>大幅度发</p>
                <p><span>方案收费</span>大幅度发</p>
                <p><span>处方</span>费大幅度发asdfas是的发送到发送到发生的方式地方官史蒂夫是的分公司电饭锅</p>
                <p><span>贴数</span>分公司电饭锅</p>
                <p><span>开方时间</span>大幅度发</p>
            </div>
        </div>
        <div style="height: 3rem">
        </div>
    </div>
</section>
<section class="chat-zone">
    <div class="chat-content" id="chat-content">

    </div>
    <footer class="" id="foot">
        <div class="reply-links">
            <div class="link-block">
                <i class="fa fa-home" aria-hidden="true"></i>
                <span>门诊信息</span>
            </div>

            <div class="link-block">
               <a href="javascript:;" class="open-popup" data-target="#half">
                   <i class="fa fa-question-circle" aria-hidden="true"></i>
                   <span>问诊单</span>
               </a>
            </div>

            <div class="link-block">
                <a href="javascript:;" id="chat-img">
                    <i class="fa fa-picture-o" aria-hidden="true"></i>
                    <span>图片</span>
                </a>
            </div>

            <div class="link-block">
                <i class="fa fa-money" aria-hidden="true"></i>
                <span>退款</span>
            </div>

            <div class="link-block">
                <i class="fa fa-camera" aria-hidden="true"></i>
                <span>拍照开方</span>
            </div>
        </div>
        <div class="reply-tools">
            <div class="w-8"><input class="reply-input" /></div>
            <div class="w-2"><a ><div class="reply-btn">发送</div></a></div>
        </div>
    </footer>
</section>



<div id="full" class='weui-popup__container'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal" >
        <div id="extral">
            <div class="weui-loadmore">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>
        <div class="btn-zone">
            <a href="javascript:;" class="weui-btn weui-btn_primary" onclick="sendInquiry()">发送</a>
            <a href="javascript:;" class="weui-btn weui-btn_default close-popup">取消</a>
        </div>

    </div>
</div>



<div id="half" class='weui-popup__container popup-bottom'>
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="toolbar">
            <div class="toolbar-inner">
                <a href="javascript:;" class="picker-button close-popup">关闭</a>
                <h1 class="title">请选择问诊单</h1>
            </div>
        </div>
        <div class="modal-content">
            <div class="weui-grids">
                <a href="javascript:;" onclick="loadInquiry('A')" class="weui-grid js_grid open-popup" data-target="#full">
                    <div style="text-align: center">
                       成人[男]
                    </div>
                    <p class="weui-grid__label">
                        29题
                    </p>
                </a>
                <a href="javascript:;" onclick="loadInquiry('B')" class="weui-grid js_grid open-popup" data-target="#full">
                    <div style="text-align: center">
                        成人[女]
                    </div>
                    <p class="weui-grid__label">
                        27题
                    </p>
                </a>
                <a href="javascript:;" onclick="loadInquiry('C')" class="weui-grid js_grid open-popup" data-target="#full">
                    <div style="text-align: center">
                        成人[儿童]
                    </div>
                    <p class="weui-grid__label">
                        34题
                    </p>
                </a>
            </div>
        </div>
    </div>
</div>

<script src="/lib/jquery-2.1.4.js"></script>
<!-- websocket -->
<script src="/plugins/websocket/sockjs.min.js"></script>
<script src="/plugins/websocket/stomp.min.js"></script>
<script src="/js/jquery-weui.js"></script>
<script type="text/javascript" src="/plugins/cropper/js/lrz.all.bundle.js"></script>
<script src="/js/home.js"></script>
<script>
    var doctorInfo,patient;
    var defaultDocAvatar= "/mod-page/images/avatar2.jpg";
    var defaultPatientAvatar = "/mod-page/images/avatar3.jpg";
    var fromId = getQueryString("did");
    var toId = getQueryString("pid");
    var tag= getQueryString("tag");

    $(document).ready(function(){
        $("nav").click(function(){
            $("nav").removeClass("currntNav");
            $(this).addClass("currntNav");
            if($(this).attr("target")=="inquir-history"){
                $(".inquir-history").show();
                $(".chat-zone").hide();
            }else if($(this).attr("target")=="chat-zone"){
                $(".inquir-history").hide();
                $(".chat-zone").show();
            }
            toBottom();
        });

        if(tag){
            $("nav").removeClass("currntNav");
            $(".inquir-history").hide();
            $(".chat-zone").show();
            $("nav").eq(1).addClass("currntNav");
        }

        $(".reply-btn").click(sendWS);
        loadDocInfo();
        loadPatientInfo();

        $("#chat-img").h5uploadSilence({
            exts: ['jpg', 'gif', 'png', 'jpeg'],
            size: 10145728,
            restric:false,
            hideSelect:true,
            name: 'idImage',
            callback:function(b64ImgData){
                wrapImageMsg(b64ImgData);

                var text = window.atob(b64ImgData.split(",")[1]);
                var buffer = new ArrayBuffer(text.length);
                var ubuffer = new Uint8Array(buffer);
                for (var i = 0; i < text.length; i++) {
                    ubuffer[i] = text.charCodeAt(i);
                }
                var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
                var blob;
                if (Builder) {
                    var builder = new Builder();
                    builder.append(buffer);
                    blob = builder.getBlob("image/jpeg");
                } else {
                    blob = new window.Blob([buffer], {type: "image/jpeg"});
                }

                var formData = new FormData();
                formData.append("img",blob);
                formData.append("bizType","chatImg");

                $.ajax({
                    url:"/im/uploadChatImg",
                    type:"post",
                    data:formData,
                    processData: false,
                    contentType: false,
                    success:function(da){
                        console.log(da.data);
                        var jsonMsg={"toId":toId,"fromId":fromId,"msg":da.data,"clientType":"doctor","msgType":"img"};
                        stompClient.send("/ws/p2pchat", {}, JSON.stringify(jsonMsg));
                    }
                });
            }
        });
        setTimeout(loadChatHistory,1000);


        $(".reply-input").focus(function(){
            setTimeout(function(){
                document.getElementById("foot").scrollIntoView(true);// 参数可以是true， false, 空参数
            }, 300);
        });
    });


    function loadDocInfo(){
        $.ajax({
            url:"/d/doctor/getDoctorInfo",
            data:{"doctorId":fromId},
            dataType:"json",
            success:function (da){
                if(da.data){
                    doctorInfo =da.data;
                    defaultDocAvatar = da.data.picPath;
                }
            }
        });
    }
    function loadPatientInfo(){
        $.ajax({
            url:"/patient/getPatientById",
            data:{"patientId":toId},
            dataType:"json",
            success:function (da){
                if(da.data){
                    patient = da.data;
                    defaultPatientAvatar = da.data.patientPicPath;
                    document.title=da.data.patientname;
                }
            }
        });
    }
    function loadChatHistory(){
        $.ajax({
            url:"/im/loadMyMessages",
            data:{"whos":"doctor","fromId":fromId,"toId":toId},
            success:function(da){
                $("#chat-content").html("");
                if(da.msg == "ok"){
                    var chatCnt= $(da.data.rows).length;
                    if(chatCnt==0){

                    }else{
                        $(da.data.rows).each(function (i){
                            if(i==0){
                                midTipMessage(this.sendTime);
                            }
                            if(this.whos=="patient"){
                                if(this.msgType=="img")
                                    wrapImageOherMsg(this.msgContent);
                                else
                                    wrapOtherTextMsg(this.msgContent);
                            }else if(this.whos=="doctor"){
                                if(this.msgType=="img")
                                    wrapImageMsg(qiniuChatImgDomain+"/"+this.msgContent);
                                else
                                    wrapMyTextMsg(this.msgContent);
                            }
                        });
                        midTipMessage("以上是历史数据");
                        $(".chat-content").append("<div style='height: 10px' id='btom'></div>");
                        setTimeout(function(){
                            document.getElementById("btom").scrollIntoView(true);// 参数可以是true， false, 空参数
                        }, 300);
                    }
                }
            }
        });

    }

    function midTipMessage(msg){
        $("#chat-content").append("<div class=\"weui-loadmore weui-loadmore_line\" style='margin-bottom: 0.3rem'>\n" +
            "        <span class=\"weui-loadmore__tips\">"+msg+"</span>\n" +
            "      </div>");
    }

    function loadInquiry(type){
        if("A"==type){
            $("#extral").load("/mod-page/inquiry/inquiry_new_frags.html");
        }
    }
    function sendInquiry(){
        $.ajax({
            url:"/inquiry/sendInquiry",
            data:{"patientId":toId,"doctorId":fromId,"inquiryId":1},
            success:function(da){
                wrapInquiry(patient.patientname);
                $.closePopup();
                $.toast("问诊单发送成功");
            }
        });
    }

    var stompClient ;
    var login = {login:fromId}
    function connectToWebSocket() {
        var socket = new SockJS("/chatServer");
        stompClient = Stomp.over(socket);
        stompClient.connect(login, function(frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe('/user/chat/backMsg', function (da) {
                var resp =  JSON.parse(da.body);
                if(resp.msgType=="text")
                    wrapOtherTextMsg(resp.msg);
                else if(resp.msgType=="img")
                    wrapImageOherMsg(resp.msg);
            });
        });
    }
    connectToWebSocket();

    function sendWS(){
        var wsMsg = $(".reply-input").val();
        if(wsMsg==""){
            $.toast("内容不能为空","text");
            return;
        }
        var jsonMsg={"toId":toId,"fromId":fromId,"msg":wsMsg,"clientType":"doctor","msgType":"text"};
        stompClient.send("/ws/p2pchat", {}, JSON.stringify(jsonMsg));
        $(".reply-input").val("");
        wrapMyTextMsg(wsMsg);
    }

    function wrapMyTextMsg(msg){
        var html= "<div class=\"message\">\n" +
            "    <div class=\"message-mid-line\"></div>\n" +
            "    <div class=\"message-box f-right\">\n" +
            "            <div class=\"message-content  \" style='display: inline-flex'>\n" +
            "                <div class=\"message-top me\">"+msg+"</div>\n" +
            "            </div>\n" +
            "            <div class=\"user-avatar\">\n" +
            "                <img src=\""+defaultDocAvatar+"\" />\n" +
            "            </div>\n" +
            "    </div>\n" +
            "  <div style=\"clear: both\"></div>" +
            "</div>";
        $(".chat-content").append(html);
        toBottom();
    }

    function wrapOtherTextMsg(msg){
        var html= "<div class=\"message\">\n" +
            "    <div class=\"message-mid-line\"></div>\n" +
            "    <div class=\"message-box\">\n" +
            "            <div class=\"user-avatar\">\n" +
            "                <img src=\""+defaultPatientAvatar+"\" />\n" +
            "            </div>\n" +
            "            <div class=\"message-content\" style='display: inline-flex'>\n" +
            "                <div class=\"message-top\">"+msg+"</div>\n" +
            "            </div>\n" +
            "    </div>\n" +
            "    <div style=\"clear: both\"></div>\n" +
            "</div>"
        $(".chat-content").append(html);
        toBottom();
    }

    function wrapImageMsg(img){
        var html= "<div class=\"message\">\n" +
            "    <div class=\"message-mid-line\"></div>\n" +
            "    <div class=\"message-box f-right\">\n" +
            "            <div class=\"message-content  \" style='display: inline-flex'>\n" +
            "                <div class=\"message-top me\" style='padding:0rem;background-color: unset'><img src=\""+img+"\" width=\"200\"/></div>\n" +
            "            </div>\n" +
            "            <div class=\"user-avatar\">\n" +
            "                <img src=\""+defaultDocAvatar+"\" />\n" +
            "            </div>\n" +
            "    </div>\n" +
            "  <div style=\"clear: both\"></div>" +
            "</div>";
        $(".chat-content").append(html);
        toBottom();
    }
    function wrapImageOherMsg(img){
        var html= "<div class=\"message\">\n" +
            "    <div class=\"message-mid-line\"></div>\n" +
            "    <div class=\"message-box\">\n" +
            "            <div class=\"user-avatar\">\n" +
            "                <img src=\""+defaultPatientAvatar+"\" />\n" +
            "            </div>\n" +
            "            <div class=\"message-content\">\n" +
            "                <div class=\"message-top\" style='padding:0rem;background-color: unset'><img src=\""+qiniuChatImgDomain+"/"+img+"\" width=\"200\"/></div>\n" +
            "            </div>\n" +
            "    </div>\n" +
            "    <div style=\"clear: both\"></div>\n" +
            "</div>";
        $(".chat-content").append(html);
        toBottom();
    }


    function wrapInquiry(name){
        var html = "<div class=\"message\">\n" +
            "    <div class=\"message-mid-line\"></div>\n" +
            "    <div class=\"message-box f-right\">\n" +
            "        <div class=\"message-content doc\">\n" +
            "            <div class=\"message-top orange-title\"><i class=\"fa fa-edit\" aria-hidden=\"true\"></i> 问诊单 <span class=\"span-right\">待填写</span></div>\n" +
            "            <div class=\"message-content-body\">\n" +
            "                <p><span>患者：</span>"+name+"</p>\n" +
            "                <p><span>主诉：</span></p>\n" +
            "                <p><span>收费：</span></p>\n" +
            "            </div>\n" +
            "            <div class=\"message-content-foot\">\n" +
            "                <a><span> -- 点击查看详情 -- </span></a>\n" +
            "            </div>\n" +
            "        </div>\n" +
            "        <div class=\"user-avatar\">\n" +
            "            <img src=\"/mod-page/images/avatar2.jpg\" />\n" +
            "        </div>\n" +
            "    </div>\n" +
            "    <div style=\"clear: both\"></div>\n" +
            "</div>";
        $(".chat-content").append(html);
        toBottom();
    }

    function toBottom(){
       /* var div = document.getElementById('chat-content');
        div.scrollTop = div.scrollHeight+60;*/

        $("#btom").appendTo($(".chat-content"));
        setTimeout(function(){
            document.getElementById("btom").scrollIntoView(true);// 参数可以是true， false, 空参数
        }, 300);
    }

    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return "";
    }



</script>
</body>
</html>
